<script setup>
import { Swiper, SwiperSlide } from 'swiper/vue'
import { Navigation, Pagination, Autoplay, EffectCube, EffectFade } from 'swiper/modules'
import ServiceBar from '@/components/ServiceBar.vue'
import Modal from '@/components/Modal.vue'
import { ref, getCurrentInstance } from 'vue'
import { cartCountStore } from '@/store/index.js'

const prefix = import.meta.env.VITE_BASE_URL
const sliderList = [
  {
    id: '42',
    img: '/imgs/slider/slide-1.jpg'
  },
  {
    id: '45',
    img: '/imgs/slider/slide-2.jpg'
  },
  {
    id: '46',
    img: '/imgs/slider/slide-3.jpg'
  },
  {
    id: '',
    img: '/imgs/slider/slide-4.jpg'
  },
  {
    id: '',
    img: '/imgs/slider/slide-5.jpg'
  },
]
const { proxy } = getCurrentInstance()
const modules = [Navigation, Pagination, Autoplay, EffectCube, EffectFade]
const menuList = [
  [
    {
      id: 30,
      img: '/imgs/item-box-1.png',
      name: '小米CC9',
    },
    {
      id: 31,
      img: '/imgs/item-box-2.png',
      name: '小米8青春版',
    },
    {
      id: 32,
      img: '/imgs/item-box-3.jpg',
      name: 'Redmi K20 Pro',
    },
    {
      id: 33,
      img: '/imgs/item-box-4.jpg',
      name: '移动4G专区',
    },
  ],
  [{
    id: 33,
    img: '/imgs/item-box-1.png',
    name: '移动4G专区',
  },
  {
    id: 33,
    img: '/imgs/item-box-1.png',
    name: '移动4G专区',
  },
  {
    id: 33,
    img: '/imgs/item-box-1.png',
    name: '移动4G专区',
  },
  {
    id: 33,
    img: '/imgs/item-box-1.png',
    name: '移动4G专区',
  }],
  [{
    id: 33,
    img: '/imgs/item-box-1.png',
    name: '移动4G专区',
  },
  {
    id: 33,
    img: '/imgs/item-box-1.png',
    name: '移动4G专区',
  },
  {
    id: 33,
    img: '/imgs/item-box-1.png',
    name: '移动4G专区',
  },
  {
    id: 33,
    img: '/imgs/item-box-1.png',
    name: '移动4G专区',
  }],
  [{
    id: 33,
    img: '/imgs/item-box-1.png',
    name: '移动4G专区',
  },
  {
    id: 33,
    img: '/imgs/item-box-1.png',
    name: '移动4G专区',
  },
  {
    id: 33,
    img: '/imgs/item-box-1.png',
    name: '移动4G专区',
  },
  {
    id: 33,
    img: '/imgs/item-box-1.png',
    name: '移动4G专区',
  }],
  [
    {
      id: 33,
      img: '/imgs/item-box-1.png',
      name: '移动4G专区',
    },
    {
      id: 33,
      img: '/imgs/item-box-1.png',
      name: '移动4G专区',
    },
    {
      id: 33,
      img: '/imgs/item-box-1.png',
      name: '移动4G专区',
    },
    {
      id: 33,
      img: '/imgs/item-box-1.png',
      name: '移动4G专区',
    }
  ],
  [{
    id: 33,
    img: '/imgs/item-box-1.png',
    name: '移动4G专区',
  },
  {
    id: 33,
    img: '/imgs/item-box-1.png',
    name: '移动4G专区',
  },
  {
    id: 33,
    img: '/imgs/item-box-1.png',
    name: '移动4G专区',
  },
  {
    id: 33,
    img: '/imgs/item-box-1.png',
    name: '移动4G专区',
  }]
]
const absList = [
  {
    id: 33,
    img: '/imgs/ads/ads-1.png'
  },
  {
    id: 48,
    img: '/imgs/ads/ads-2.jpg'
  },
  {
    id: 45,
    img: '/imgs/ads/ads-3.png'
  },
  {
    id: 47,
    img: '/imgs/ads/ads-4.jpg'
  },
]
const phoneList = [
  [
    {
      img: '//i1.mifile.cn/a1/pms_1550642182.7527088!220x220.jpg',
      name: '小米9 6GB+128GB',
      content: '骁龙855，索尼4800万超广角微距三摄',
      price: '2599元'
    },
    {
      img: '//i1.mifile.cn/a1/pms_1550642182.7527088!220x220.jpg',
      name: '小米MIX 3 6GB+128GB',
      content: '磁动力滑盖全面屏/四曲面陶瓷机身',
      price: '2299元'
    },
    {
      img: '//i1.mifile.cn/a1/pms_1552647865.67536173!220x220.jpg',
      name: 'Redmi Note 7 Pro',
      content: '6GB+128GB大存储，索尼4800万拍照',
      price: '1599元'
    },
    {
      img: '//i1.mifile.cn/a1/pms_1554694214.08887531!220x220.png',
      name: '小米Play 4GB+64GB',
      content: '八核高性能处理器，后置1200万 AI双摄',
      price: '749元'
    }
  ],
  [
    {
      img: '//i1.mifile.cn/a1/pms_1538019009.57772743!220x220.png',
      name: '小米8 屏幕指纹版 6GB+128GB',
      content: '全球首款压感屏幕指纹 骁龙845处理器',
      price: '1799元'
    },
    {
      img: '//i1.mifile.cn/a1/pms_1537324004.08544830!220x220.jpg',
      name: '小米8青春版6GB+64GB',
      content: '潮流镜面渐变色，2400万自拍旗舰',
      price: '1499元'
    },
    {
      img: '//i1.mifile.cn/a1/pms_1547020972.223707!220x220.jpg',
      name: 'Redmi Note 7 6GB+64G',
      content: '4800万拍照，4000mAh大电量',
      price: '1099元'
    },
    {
      img: '//i1.mifile.cn/a1/pms_1558857780.47412427!220x220.jpg',
      name: 'Rdemi K20 Pro 6GB+128GB',
      content: '骁龙855旗舰处理器，索尼4800万超...',
      price: '2299元'
    }
  ]
]
const jiadianList = [
  [
    {
      img: '//i1.mifile.cn/a1/pms_1500287084.72131750!220x220.jpg',
      name: '小米电视4A 32英寸',
      content: '64位四核处理器/1GB+4GB大内存',
      price: '699元'
    },
    {
      img: '//i1.mifile.cn/a1/pms_1535103027.24861415!220x220.jpg',
      name: '小米电视4A 65英寸',
      content: '',
      price: '2599元'
    },
    {
      img: '//i1.mifile.cn/a4/xmad_15350951136177_QUuVm.png',
      name: '15.6"笔记本 i5 4G MX110',
      content: '',
      price: '4199元'
    },
    {
      img: '//i1.mifile.cn/a1/pms_1524636075.71677607!220x220.jpg',
      name: '13.3"小米笔记本Air 四核i7 8G 2..',
      content: '',
      price: '5999元'
    }
  ],
  [
    {
      img: '//i1.mifile.cn/a1/pms_1560161251.21862332!220x220.jpg',
      name: '米家互联网洗烘一体机 Pro 10kg',
      content: '',
      price: '2999元'
    },
    {
      img: '//i1.mifile.cn/a1/pms_1545286017.38639954!220x220.jpg',
      name: '米家互联网空调（一级能效）',
      content: '',
      price: '2399元'
    },
    {
      img: '//i1.mifile.cn/a1/pms_1560232653.29021311!220x220.jpg',
      name: '烟灶套装（天然气）',
      content: '吸油,燃气灶,油烟机,抽烟机,灶具,套装',
      price: '2298元'
    },
    {
      img: '//i1.mifile.cn/a1/pms_1559644554.04136931!220x220.jpg',
      name: '米家电烤箱',
      content: '',
      price: '299元'
    }
  ]
]
const zhinengList = [
  {
    img: '//i1.mifile.cn/a1/pms_1499048837.78256911!220x220.jpg',
    name: '米兔积木机器人 履带机甲',
    content: '履带底盘，智能操控，百变拼插',
    price: '299元'
  },
  {
    img: '//i1.mifile.cn/a1/pms_1464615180.86261317!220x220.jpg',
    name: '米兔智能故事机',
    content: '微信远程互动，智能语音交互',
    price: '199元'
  },
  {
    img: '//i1.mifile.cn/a4/31ae6df6-b672-491e-ab95-7b83a965c694',
    name: '米家骑记电助力折叠自行车',
    content: '力矩传感电助力，折叠便携设计',
    price: '2999元'
  },
  {
    img: '//i1.mifile.cn/a1/pms_1480474019.52478532!220x220.jpg',
    name: '米家多功能网关',
    content: '米家智能配件控制中心',
    price: '119元'
  },
  {
    img: '//i1.mifile.cn/a1/pms_1560161251.21862332!220x220.jpg',
    name: '米家互联网洗烘一体机 Pro 10kg',
    content: '积木 沙漠赛车',
    price: '129元'
  },
  {
    img: '//i1.mifile.cn/a1/pms_1498526059.78899603!220x220.jpg',
    name: '米兔儿童电话手表2',
    content: 'AMOLED高清彩屏，6 天超长续航',
    price: '399元'
  },
  {
    img: '//i1.mifile.cn/a1/pms_1515662525.51823819!220x220.jpg',
    name: '米兔智能积木',
    content: '动手又动脑，启发孩子创造力',
    price: '169元'
  },
  {
    img: '//i1.mifile.cn/a1/pms_1538031692.35815325!220x220.jpg',
    name: '小米米家小白智能摄像机增强版',
    content: '',
    price: '349元'
  }
]
const showModal = ref(false)
const addCart = (id) => {
  showModal.value = true
  proxy.axios.post('/carts', {
    productId: id,
    selected: true
  }).then(() => {
    showModal.value = true
    cartCountStore().addCart(res.cartTotalQuantity)
  }).catch(() => {
    showModal.value = true
  })
}
const goToCart = () => {
}
</script>

<template>
  <div class="index">
    <div class="container">
      <div class="swiper-box">
        <div class="nav-menu">
          <ul class="menu-wrap">
            <li class="menu-item">
              <a href="javascript:;">手机&nbsp;电话卡</a>
              <div class="children">
                <ul v-for="item in menuList">
                  <li v-for="sub in item">
                    <router-link :to="{ name: 'product', params: { id: +sub.id } }">
                      <img v-lazy="prefix + sub.img" alt="">
                      {{ sub.name }}
                    </router-link>
                  </li>
                </ul>
              </div>
            </li>
            <li class="menu-item">
              <a href="javascript:;">电视&nbsp;盒子</a>
              <div class="children">
                <ul v-for="item in menuList">
                  <li v-for="sub in item">
                    <router-link :to="{ name: 'product', params: { id: +sub.id } }">
                      <img v-lazy="prefix + sub.img" alt="">
                      {{ sub.name }}
                    </router-link>
                  </li>
                </ul>
              </div>
            </li>
            <li class="menu-item">
              <a href="javascript:;">笔记本&nbsp;平板</a>
              <div class="children">
                <ul v-for="item in menuList">
                  <li v-for="sub in item">
                    <router-link :to="{ name: 'product', params: { id: +sub.id } }">
                      <img v-lazy="prefix + sub.img" alt="">
                      {{ sub.name }}
                    </router-link>
                  </li>
                </ul>
              </div>
            </li>
            <li class="menu-item">
              <a href="javascript:;">家电&nbsp;插线板</a>
              <div class="children">
                <ul v-for="item in menuList">
                  <li v-for="sub in item">
                    <router-link :to="{ name: 'product', params: { id: +sub.id } }">
                      <img v-lazy="prefix + sub.img" alt="">
                      {{ sub.name }}
                    </router-link>
                  </li>
                </ul>
              </div>
            </li>
            <li class="menu-item">
              <a href="javascript:;">出行&nbsp;穿戴</a>
              <div class="children">
                <ul v-for="item in menuList">
                  <li v-for="sub in item">
                    <router-link :to="{ name: 'product', params: { id: +sub.id } }">
                      <img v-lazy="prefix + sub.img" alt="">
                      {{ sub.name }}
                    </router-link>
                  </li>
                </ul>
              </div>
            </li>
            <li class="menu-item">
              <a href="javascript:;">智能&nbsp;路由器</a>
              <div class="children">
                <ul v-for="item in menuList">
                  <li v-for="sub in item">
                    <router-link :to="{ name: 'product', params: { id: +sub.id } }">
                      <img v-lazy="prefix + sub.img" alt="">
                      {{ sub.name }}
                    </router-link>
                  </li>
                </ul>
              </div>
            </li>
            <li class="menu-item">
              <a href="javascript:;">电源&nbsp;配件</a>
              <div class="children">
                <ul v-for="item in menuList">
                  <li v-for="sub in item">
                    <router-link :to="{ name: 'product', params: { id: +sub.id } }">
                      <img v-lazy="prefix + sub.img" alt="">
                      {{ sub.name }}
                    </router-link>
                  </li>
                </ul>
              </div>
            </li>
            <li class="menu-item">
              <a href="javascript:;">生活&nbsp;箱包</a>
              <div class="children">
                <ul v-for="item in menuList">
                  <li v-for="sub in item">
                    <router-link :to="{ name: 'product', params: { id: +sub.id } }">
                      <img v-lazy="prefix + sub.img" alt="">
                      {{ sub.name }}
                    </router-link>
                  </li>
                </ul>
              </div>
            </li>
          </ul>
        </div>
        <swiper navigation :pagination="{ clickable: true }" :modules="modules" loop="true" :autoplay="{ delay: 2000 }"
          effect="fade">
          <swiper-slide v-for="(item, index) in sliderList" :key="index">
            <!--使用router.params为动态路由传参-->
            <router-link :to="{ name: 'product', params: { id: +item.id } }">
              <img v-lazy="prefix + item.img" alt="">
            </router-link>
          </swiper-slide>
        </swiper>
      </div>
      <div class="abs-box">
        <router-link :to="{ name: 'product', params: { id: item.id } }" v-for="(item, index) in absList" :key="index">
          <img v-lazy="prefix + item.img" :data-img="item.img" alt="">
        </router-link>
      </div>
      <div class="banner">
        <a href="/#/product/30">
          <img v-lazy="prefix + '/imgs/banner-1.png'" data-img="/mimall/imgs/banner-1.png" alt="">
        </a>
      </div>
    </div>
    <div class="product-box">
      <div class="container">
        <div>
          <h2>手机</h2>
          <div class="wrapper1">
            <div class="banner-left">
              <a href="/#/product/35">
                <img v-lazy="prefix + '/imgs/mix-alpha.jpg'" alt="">
              </a>
            </div>
            <div class="list-box">
              <div class="list" v-for="(arr, i) in phoneList" :key="i">
                <div class="item" v-for="(item, j) in arr" :key="j">
                  <span :class="{ 'new-pro': j % 2 === 0 }">新品</span>
                  <div class="item-img">
                    <img v-lazy="item.img" alt="">
                  </div>
                  <div class="item-info">
                    <h3>{{ item.name }}</h3>
                    <p>{{ item.content }}</p>
                    <p class="price" @click="addCart(item.id)">{{ item.price }}</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="banner">
          <a href="/#/product/30">
            <img v-lazy="'//i1.mifile.cn/a4/xmad_1565158413055_UEszn.jpg'" alt="">
          </a>
        </div>
        <div>
          <h2>家电</h2>
          <div class="wrapper2">
            <div class="banner-left">
              <a href="/#/product/35">
                <img v-lazy="'//i1.mifile.cn/a4/xmad_15608266264545_qWIRv.jpg'" alt="">
              </a>
              <a href="/#/product/35">
                <img v-lazy="'//i1.mifile.cn/a4/xmad_15608266614476_wdGNy.jpg'" alt="">
              </a>
            </div>
            <div class="list-box">
              <div class="list" v-for="(arr, i) in jiadianList" :key="i">
                <div class="item" v-for="(item, j) in arr" :key="j">
                  <span :class="{ 'new-pro': j % 2 === 0 }">新品</span>
                  <div class="item-img">
                    <img v-lazy="item.img" alt="">
                  </div>
                  <div class="item-info">
                    <h3>{{ item.name }}</h3>
                    <p>{{ item.content }}</p>
                    <p class="price" @click="addCart(item.id)">{{ item.price }}</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="banner">
          <a href="/#/product/30">
            <img v-lazy="prefix + '/imgs/banner-1.png'" data-img="/mimall/imgs/banner-1.png" alt="">
          </a>
        </div>
        <div>
          <h2>智能</h2>
          <div class="wrapper2">
            <div class="banner-left">
              <a href="/#/product/35">
                <img v-lazy="'//i1.mifile.cn/a4/xmad_15616291664006_XWeFG.jpg'" alt="">
              </a>
              <a href="/#/product/35">
                <img v-lazy="'//i1.mifile.cn/a4/xmad_15501975795809_qmOCe.jpg'" alt="">
              </a>
            </div>
            <div class="list-box">
              <div class="item" v-for="(item, index) in zhinengList" :key="index">
                <span :class="{ 'new-pro': index % 2 === 0 }">新品</span>
                <div class="item-img">
                  <img v-lazy="item.img" alt="">
                </div>
                <div class="item-info">
                  <h3>{{ item.name }}</h3>
                  <p>{{ item.content }}</p>
                  <p class="price" @click="addCart(item.id)">{{ item.price }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <service-bar></service-bar>
    <modal title="提示" sureText="查看购物车" btnType="1" modalType="middle" :showModal="showModal" @submit="goToCart"
      @cancel="showModal = false">
      <template #body>
        <p>商品添加成功！</p>
      </template>
    </modal>
  </div>
</template>

<style lang="scss">
@import './../assets/config.scss';
@import './../assets/mixin.scss';

.index {
  .swiper-box {

    .nav-menu {
      box-sizing: border-box;
      position: absolute;
      width: 264px;
      height: 451px;
      z-index: 9;
      padding: 26px 0;
      background-color: #55585a7a;

      .menu-wrap {
        .menu-item {
          height: 50px;
          line-height: 50px;

          a {
            display: block;
            position: relative;
            font-size: 16px;
            color: $colorG;
            padding-left: 30px;

            &::after {
              position: absolute;
              right: 30px;
              top: 17.5px;
              content: '';
              @include bgImg(10px, 15px, '/imgs/icon-arrow.png');
            }
          }

          &:hover {
            background-color: $colorA;

            .children {
              display: block;
            }
          }

          .children {
            display: none;
            width: 962px;
            height: 451px;
            position: absolute;
            left: 264px;
            top: 0;
            border: 1px solid $colorH;
            background-color: $colorG;

            ul {
              display: flex;
              justify-content: space-between;
              height: 75px;

              li {
                height: 75px;
                line-height: 75px;
                flex: 1;
                padding-left: 23px;

                a {
                  color: $colorB;
                  font-size: 14px;

                  img {
                    width: 35px;
                    height: 42px;
                    vertical-align: middle;
                    margin-right: 15px;
                  }
                }
              }
            }
          }
        }
      }
    }

    .swiper {
      height: 451px;

      .swiper-button-prev {
        left: 274px;
      }
    }
  }

  .abs-box {
    @include flex();
    margin-top: 14px;

    a {
      width: 296px;
      height: 167px;
    }
  }

  .banner {
    margin-top: 35px;
    margin-bottom: 50px;
  }

  .product-box {
    background-color: $colorJ;
    padding-top: 30px;
    padding-bottom: 50px;

    h2 {
      font-size: $fontE;
      font-weight: 300;
      height: 21px;
      line-height: 21px;
      color: $colorB;
      margin-bottom: 20px;
    }

    .wrapper1 {
      display: flex;

      .banner-left {
        margin-right: 16px;

        img {
          width: 224px;
          height: 619px;
        }
      }

      .list-box {
        .list {
          @include flex();
          width: 986px;
          margin-bottom: 14px;

          &:last-child {
            margin-bottom: 0;
          }

          .item {
            width: 236px;
            height: 302px;
            background-color: $colorG;
            text-align: center;

            span {
              display: inline-block;
              width: 67px;
              height: 24px;
              font-size: 14px;
              line-height: 24px;
              color: $colorB;

              &.new-pro {
                background-color: #7ECF68;
              }

              &.kill-pro {
                background-color: #E82626;
              }
            }

            .item-img {
              img {
                height: 195px;
              }
            }

            .item-info {
              h3 {
                font-size: 14px;
                color: $colorB;
                line-height: 14px;
                font-weight: bold;
              }

              p {
                color: $colorD;
                line-height: 13px;
                margin: 6px auto 13px;
              }

              .price {
                color: #F20A0A;
                font-size: 14px;
                font-weight: bold;
                cursor: pointer;

                &::after {
                  content: '';
                  @include bgImg(22px, 22px, '/imgs/icon-cart-hover.png');
                  margin-left: 5px;
                  vertical-align: middle;
                }
              }
            }
          }
        }
      }
    }

    .wrapper2 {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      grid-template-rows: repeat(2, 1fr);
      width: 100%;
      height: 619px;

      .banner-left {
        grid-column: 1/2;
        grid-row: 1/3;

        img {
          width: 224px;
          height: 302px;
          margin-bottom: 12px;
        }
      }

      .list-box {
        grid-column: 2/6;
        margin-left: -6px;

        .item {
          display: inline-block;
          width: 236px;
          height: 302px;
          background-color: $colorG;
          text-align: center;
          margin-bottom: 14px;
          margin-right: 14px;
          vertical-align: middle;

          &:nth-child(4n) {
            margin-right: 0;
          }

          span {
            display: inline-block;
            width: 67px;
            height: 20px;
            font-size: 14px;
            line-height: 24px;
            color: $colorB;

            &.new-pro {
              background-color: #7ECF68;
            }

            &.kill-pro {
              background-color: #E82626;
            }
          }

          .item-img {
            img {
              height: 195px;
            }
          }

          .item-info {
            h3 {
              font-size: 14px;
              color: $colorB;
              line-height: 14px;
              font-weight: bold;
            }

            p {
              color: $colorD;
              line-height: 13px;
              margin: 6px auto 13px;
            }

            .price {
              color: #F20A0A;
              font-size: 14px;
              font-weight: bold;
              cursor: pointer;
              margin-top: -10px;

              &::after {
                content: '';
                @include bgImg(22px, 22px, '/imgs/icon-cart-hover.png');
                margin-left: 5px;
                vertical-align: middle;
              }
            }
          }
        }
      }
    }
  }
}
</style>